<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-steps :active="currentStep.idx" align-center>
                <el-step title="基础信息" description="添加商品标题基础配置"></el-step>
                <el-step title="图片及介绍" description="上传图片以及图文介绍"></el-step>
                <el-step title="SKU信息配置" description="sku选择/新增"></el-step>
                <el-step title="关联商品选择" description="套餐以及推荐商品选择"></el-step>
            </el-steps>
        </template>
        <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="22" :offset="1">
                <component :is="currentStep.name" @next="next"></component>
            </el-col>
        </el-row>
    </d2-container>
</template>

<script>

    import {PRODUCT_STEP1, PRODUCT_STEP2, PRODUCT_STEP3, PRODUCT_STEP4} from "./steps/index";

    const STEP_OPTIONS = [
        {
            idx: 1,
            name: 'PRODUCT_STEP1'
        },
        {
            idx: 2,
            name: 'PRODUCT_STEP2'
        },
        {
            idx: 3,
            name: 'PRODUCT_STEP3'
        },
        {
            idx: 4,
            name: 'PRODUCT_STEP4'
        }
    ];

    export default {
        name: "product-add",
        components: {
            PRODUCT_STEP1,
            PRODUCT_STEP2,
            PRODUCT_STEP3,
            PRODUCT_STEP4
        },
        data() {
            return {
                filename: __filename,
                activeIdx: 0
            }
        },
        computed: {
            currentStep() {
                return STEP_OPTIONS[this.activeIdx];
            }
        },
        methods: {
            next() {
                if (this.activeIdx++ > 4) {
                    this.activeIdx = 0;
                }
            }
        }
    }
</script>

<style scoped>


</style>
